<template>
  <div class="app-wrapper">
    <div class="main" :style="{height: wHeight - 0 + 'px'}">
      <div class="register-box">
        <h3>找回密码</h3>
        <el-form :model="passwordForm" status-icon :rules="rules" ref="passwordForm" class="login-form">
          <el-form-item prop="legalPhone" label="负责人手机号">
            <el-input v-model="passwordForm.legalPhone" maxlength="11" placeholder="请填写登录系统的负责人手机号"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="14">
              <el-form-item prop="phoneCode">
                <el-input v-model="passwordForm.phoneCode" maxlength="4" placeholder="请输入验证码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-button type="primary" :loading="loading" style="width:100%" v-text="validtext" :disabled="validflag" @click="getCode('')"></el-button>
            </el-col>
          </el-row>
          <el-form-item prop='password1' label='请填写密码'>
            <el-input type='password' v-model='passwordForm.password1'></el-input>
          </el-form-item>
          <el-form-item prop='password2' label='确认密码'>
            <el-input type='password' v-model='passwordForm.password2'></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' @click="submitForm('passwordForm')" :loading='loading' style='width:100%'>提交</el-button>
          </el-form-item>
          <!--         
          <el-form-item>
            <el-button type="primary" @click="submitForm('passwordForm')" :loading="loading" style="width:100%">下一步</el-button>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { changeRegisterPass, getPhoneCode } from '@/api/register';
import { removeToken } from '@/utils/auth';

export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        this.validflag = true;
        callback(new Error('请输入正确的手机号码'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (!reg.test(value)) {
          this.validflag = true;
          callback(new Error('请输入正确的11位手机号码'));
        } else {
          if (this.validtime == false) {
            this.validflag = false;
          }
          callback();
        }
      }
    };
    var validPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入正确的密码'));
      } else if (value != this.passwordForm.password1) {
        callback(new Error('请输入正确的密码'));
      } else {
        callback();
      }
    };
    var vaildateNum = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入图片验证码'));
      } else {
        var len = value.length;
        if (len != 4) {
          callback(new Error('请输入图片验证码'));
        } else {
          callback();
        }
      }
    };
    return {
      wHeight: 0,
      validtext: '获取验证码',
      validflag: true,
      validtime: false,
      passwordForm: {
        legalPhone: '',
        phoneCode: '',
        password1: '',
        password2: ''
      },
      rules: {
        legalPhone: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ],
        phoneCode: [
          { required: true, validator: vaildateNum, trigger: 'blur' }
        ],
        password1: [
          {
            required: true,
            min: 6,
            max: 24,
            message: '请设置登录密码,长度在6-24个字符',
            trigger: 'blur'
          }
        ],
        password2: [{ required: true, validator: validPass, trigger: 'blur' }]
      },
      loading: false
    };
  },
  created() {},
  mounted() {
    this.setHeight();
    window.onresize = () => {
      this.setHeight();
    };
  },
    watch:{
      'passwordForm.legalPhone':function (legalPhone) {
          if(legalPhone.length==11){
              this.validflag = false;
          }
      }
    },

  methods: {
    setHeight() {
      let oHtml = document.getElementsByTagName('html')[0];
      let wHeight = oHtml.clientHeight;
      this.wHeight = wHeight;
    },
    submitForm(formName) {
      let that = this;

      that.$refs[formName].validate(valid => {
        if (valid) {
            that.loading = true;
          //注册
          var token = '';
          if (localStorage.hasOwnProperty('token')) {
            token = localStorage.getItem('token');
          }
          changeRegisterPass(
            token,
            that.passwordForm.legalPhone,
            that.passwordForm.phoneCode,
            that.passwordForm.password1
          )
            .then(data => {
              console.log('', data);
              that.loading = false;
              this.$message({
                message: '密码修改成功，请用新密码重新登录系统！',
                type: 'success'
              });
              removeToken();
              if (localStorage.hasOwnProperty('token')) {
                localStorage.removeItem('token');
              }
              that.$router.push({ path: '/login' });
            })
            .catch(function(error) {
              console.log(error);
              that.loading = false;
            });
        } else {
          this.$message.error('内容输入不正确！!');
          return
        }
      });
    },
    getCode() {
      let that = this;
      this.validflag = true;
      var phone = that.passwordForm.legalPhone;
      var token = '';
      if (localStorage.hasOwnProperty('token')) {
        token = localStorage.getItem('token');
      }
      //得到手机验证码
      getPhoneCode(token, phone)
        .then(data => {
          console.log('getCode ', data);
          that.validtime = true;
          var num = 120;
          var timer = setInterval(function() {
            num--;
            that.validtext = num + '秒后重新获取';
            that.validflag = true;
            if (num === 0) {
              that.validflag = false;
              that.validtext = '获取验证码';
              that.validtime = false;
              clearInterval(timer);
            }
          }, 1000);
        })
        .catch(function(error) {

          console.log(error);
        });
    }
  }
};
</script>
<style rel='stylesheet/scss' lang="scss" scoped>
@import 'src/styles/mixin.scss';
.app-wrapper {
  @include clearfix;
  width: 100%;
}

.main {
  position: relative;
  background: #0c75c1;
  padding-top: 100px;
}

.register-box {
  background: #fff;
  width: 500px;
  margin: auto;
  padding: 20px 30px;
  border-radius: 6px;
  h3 {
    text-align: center;
  }
}
</style>
